<template>
  <div class="main-content">
    <component
      :is="componentName"
      @toChangeComponentName="changeComponentName"
      @toChangeTarget="changeTarget"
      :target="target"
      :source="source"
    ></component>
  </div>
</template>

<script>
import List from './list.vue';
import Add from './add.vue';
import Edit from './edit.vue';
import Detail from './detail.vue';
export default {
  name: 'appManage',
  components: {
    List,
    Add,
    Edit,
    Detail
  },
  data() {
    return {
      componentName: 'list',
      target: null,
      source: null
    };
  },
  methods: {
    changeComponentName(name) {
      this.source = this.componentName;
      this.componentName = name;
      if (name === 'list') {
        this.target = null;
      }
    },
    changeTarget(obj) {
      this.target = obj;
    }
  }
};
</script>

<style lang="scss" scoped>
.main-content {
  box-shadow: none;
  background-color: transparent !important;
}
</style>
